<template>
	<view class="page">
		<view class="title">
			欢迎使用~
		</view>
			
			<p class="two">用户登录</p>
			<view class="register-form">
				<view class="form-item">
					<input type="number" placeholder="请输入手机号" maxlength="11" v-model="phoneNum" auto-focus>
				</view>
			</view>
			<view class="register-form">
				<view class="form-item">
					<input type="password" placeholder="请确认密码" maxlength="11" v-model="password">
				</view>
			</view>
			<span id="ty">我已阅读并同意<span class="ew">用户注册</span>和<span class="ew">隐私政策</span></span>
			<!-- <p id="ty">我已阅读并同意<a href="#">用户注册</a>和<a href="#">隐私政策</a></p> -->

			       
			<view class="register-btn" @click="loginForm">
				<a href="index.vue" class="external-link">立即登录</a>
			</view>
			<view class="register-zc">
				 <!-- <p>还没有账号？<a href="#">立即注册</a></p> -->
				<view id="zhuce">还没账号？<view class="tz" @click="goRegister">立即注册</view></view>
			</view>
			
 	</view>
</template>

<script>
	import {login} from "../../api/index.js"
		export default {
			data() {
				return {
					phoneNum:"",
					password:""
				}
			},
			methods: {
				goRegister(){
					// 跳转到注册页面
					uni.navigateTo({
						url:"/pages/register/register"
					})
				},
				loginForm(){
					// 组合数据
					let obj = {
						phoneNum:this.phoneNum,
						password:this.password
					}
					console.log(obj);
					// 判断输入的是否为空
					if(!this.phoneNum.trim() || !this.password.trim()){
						uni.showToast({
							title:"不能为空"
						})
						return
					}
					login(obj).then(res=>{
						if(res.data.status === 0){
							console.log(res,"登录返回的数据");
							uni.showToast({
								title:"登录成功"
							})
							// 跳转页面
							setTimeout(()=>{
								// 跳转到首页面 使用switchTab 因为首页是tabbar页面所以需要用switchTab跳转
								uni.switchTab({
									url:"/pages/index/index"
								})
							},800)
							// 把返回的token 和 userInfo存到本地 uni.setStorageSync
							uni.setStorageSync("name","吴晨琳")
							uni.setStorageSync("token",res.data.token)
							uni.setStorageSync("userInfo",res.data.userInfo)
						} else {
							uni.showToast({
								title:"登录失败"
							})
						}
					})			
				}
			}
		}
</script>

<style lang="scss" scoped>
.page{
	background: linear-gradient(#b2cfed,#ffffff);
	width: 100%;
	height: 100vh;
	.title{
		font-size: 36rpx;
		font-weight: bold;
		width: 100%;
		height: 40rpx;
		line-height: 40rpx;
		// background-color: pink;
		padding-left: 15rpx;
		margin-bottom: 20px;
		}
	.two{
		font-size: 34rpx;
		font-weight: bold;
		width: 100%;
		height: 40rpx;
		line-height: 40rpx;
		padding-left: 15rpx;
		margin-bottom: 20px;
	}
	.register-form{
		width: 85%;
		height: 50rpx;
		margin: 20px auto;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		border-radius: 40rpx;
		.form-item{
			padding-bottom: 10px;
			height: 100rpx;
			margin-bottom: 30px;
			// border-radius: 40rpx;
			input{
				padding-left: 5rpx;
			}
		}
	}
	.register-btn{
		width: 85%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background-color: rgb(167, 197, 251);
		margin: 80rpx auto 0;
		border-radius: 40rpx;
		color:#fff;
	}
	#ty{
		padding-left: 20px;
		font-size: 15px;
	}
	.register-zc{
		text-align: center;
		// a {
		//     color: #007BFF;
		//     text-decoration: none;
		// }
		// a:hover {
		//     text-decoration: underline;
		// }
	}
		// a:link {
		//     color: blue; /* 未访问链接的颜色 */
		//     text-decoration: none; /* 去除下划线 */
		// }
	#zhuce{
		display: flex;
		margin-left: 100px;
	}
	.ew,.tz {
	     color: blue;
	     text-decoration: underline;
	     cursor: pointer;
	 }
	 /* 鼠标悬停效果 */
	.ew,.tz:hover {
	     text-decoration: none;
	 }

}

</style>

